<template>
  <div class="artist-detail" v-title :data-title="$t('router.artistJazzTitle')">
    <div class="Breadcrumbback">
      <Breadcrumb></Breadcrumb>
    </div>
    <div class="main">
      <div class="box" :class="detailData.personBlurbText ? 'top' : 'top-no'">
        <h3>
          {{
            $i18n.locale === "zh"
              ? detailData.fullCname || detailData.fullName
              : detailData.fullName
          }}
          <!-- 出生日期 -->
          <span v-show="detailData.dateBirth && detailData.dateDeath"
            >({{ detailData.dateBirth }} - {{ detailData.dateDeath }})</span
          >
        </h3>
        <div class="text" v-html="detailData.personBlurbText"></div>
      </div>
      <el-tabs class="box content" v-model="activeName">
        <el-tab-pane
          :label="$t('main.worksList')"
          name="first"
          v-if="detailData.musicWorks && detailData.musicWorks.length > 0"
        >
          <el-table :data="detailData.musicWorks" height="400">
            <el-table-column
              :label="$t('main.worksName')"
              min-width="50%"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span
                  @click="toDetail(scope.row, 'work')"
                  class="pointer"
                  v-text="
                    $i18n.locale === 'zh'
                      ? scope.row.workCname || scope.row.workName
                      : scope.row.workName
                  "
                ></span>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('public.classify')"
              min-width="25%"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <p v-if="scope.row.category && scope.row.category.categoryName">
                  <span
                    v-text="
                      $i18n.locale === 'zh'
                        ? scope.row.category.categoryCname ||
                          scope.row.category.categoryName
                        : scope.row.category.categoryName
                    "
                  ></span>
                </p>
                <p v-else>
                  <span v-text="$t('public.noInformation')"></span>
                </p>
              </template>
            </el-table-column>
            <!-- 创作年代 -->
            <el-table-column
              :label="$t('main.creationAge')"
              min-width="25%"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <p v-if="scope.row.yearComposed">
                  <span v-text="scope.row.yearComposed"></span>
                </p>
                <p v-else>
                  <span v-text="$t('public.noInformation')"></span>
                </p>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- 专辑列表 -->
        <el-tab-pane
          :label="$t('main.albumList')"
          name="second"
          v-if="albumList.length > 0"
        >
          <el-table :data="albumList" height="400">
            <el-table-column
              :label="$t('main.albumName')"
              min-width="40%"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span
                  @click="toDetail(scope.row, 'album')"
                  class="pointer"
                  v-text="
                    $i18n.locale === 'zh'
                      ? scope.row.catalogueCname || scope.row.catalogueName
                      : scope.row.catalogueName
                  "
                ></span>
              </template>
            </el-table-column>
            <!-- 分类 -->
            <el-table-column
              :label="$t('public.classify')"
              min-width="25%"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <p v-if="scope.row.categories">
                  <span
                    v-for="item of scope.row.categories"
                    class="item-space"
                    v-text="
                      $i18n.locale === 'zh'
                        ? item.categoryCname || item.categoryName
                        : item.categoryName
                    "
                    :key="item.categoryName"
                  ></span>
                </p>
                <p v-else>
                  <span v-text="$t('public.noInformation')"></span>
                </p>
              </template>
            </el-table-column>
            <!-- 厂牌 -->
            <el-table-column
              :label="$t('public.brand')"
              min-width="20%"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <p
                  v-if="
                    scope.row.musicLabel && scope.row.musicLabel.displayName
                  "
                >
                  <span v-text="scope.row.musicLabel.displayName"></span>
                </p>
                <p v-else>
                  <span v-text="$t('public.noInformation')"></span>
                </p>
              </template>
            </el-table-column>
            <!-- 专辑号 -->
            <el-table-column
              :label="$t('main.albumNo')"
              min-width="15%"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <p v-if="scope.row.catalogueId">
                  <span v-text="scope.row.catalogueId"></span>
                </p>
                <p v-else>
                  <span v-text="$t('public.noInformation')"></span>
                </p>
              </template>
            </el-table-column>
          </el-table>
          <div class="page-wrap">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="params.pageNum"
              :page-size="params.pageSize"
              background
              hide-on-single-page
              layout="total, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import Breadcrumb from "@/components/common/Breadcrumb/Index";
export default {
  data() {
    return {
      activeName: "",
      detailData: {}, //详情页数据
      albumList: [],
      params: {
        pageNum: 1,
        pageSize: 50,
      },
      //是否显示分页 / 加载更多
      total: 0, //总条数
    };
  },
  components: {
    Breadcrumb,
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getPersonInfo();
    this.getPersonAlbumList();
  },
  methods: {
    //分页 每页条数
    handleSizeChange(val) {
      this.params.pageSize = val;
      this.getPersonAlbumList();
    },
    //当前页
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.getPersonAlbumList();
    },
    async getPersonInfo() {
      try {
        let params = {
          personId: this.$route.params.personId,
          personTypeId: this.$route.params.personTypeId,
        };
        let res = await this.$api.jazz.getPersonInfo(params);
        if (res.code === 1000000) {
          this.detailData = res.source ? res.source : {};
          this.activeName = res.source.musicWorks ? "first" : "second";
        }
      } catch (e) {
        console.log(e);
      }
    },
    async getPersonAlbumList() {
      this.fullscreenLoading = true;
      try {
        let params = {
          personId: this.$route.params.personId,
          personTypeId: this.$route.params.personTypeId,
        };
        let res = await this.$api.jazz.getPersonAlbumList({
          ...this.params,
          ...params,
        });
        if (res.code === 1000000) {
          this.albumList = res.source ? res.source : [];
          this.total = res.total;
          this.fullscreenLoading = false;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 点击跳转专辑详情页
    toDetail(item, type) {
      if (type === "work") {
        let params = {
          personId: this.detailData.personId,
          personTypeId: this.detailData.personTypeId,
          workId: item.workId,
        };
        this.$router.push({
          name: "jazzWorkDetail",
          params,
        });
      } else if (type === "album") {
        let params = {
          sort:
            item.moduleId == 516
              ? "classical"
              : item.moduleId == 518
              ? "national"
              : "jazz",
          id: item.catalogueId,
        };
        this.$router.push({
          name: "jazzAlbumDetail",
          params,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.artist-detail {
  .main {
    .box {
      h3 {
        font-size: 30px;
        font-weight: bolder;
        padding: 24px 0 32px 0;
        color: #000000;
        > span {
          line-height: 25px;
          font-weight: 500;
          font-size: 18px;
          color: #999999;
        }
      }
      &.top {
        background: #f5f5f5;
        width: 100%;
        height: 230px;
        padding: 0 24px;
        margin: 32px 0;
        overflow: auto;
      }
    }
    .content {
      .el-tabs__content {
        .el-table {
          thead {
            color: #000000;
          }
        }
      }
      .page-wrap {
        float: right;
      }
    }
  }
}
</style>
